<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        鼠标移动发生效果  mousemove

        整个页面发生效果  给document绑定鼠标移动事件 

        拿到鼠标点击的位置 距离 可视窗口的距离  clientX  
        clientY 


        最后赋值给 指定的标签


     -->
    <h1>x轴坐标:<span class="x">0</span></h1>
    <h1>y轴坐标:<span class="y">0</span></h1>


    <script>
        var xBox = document.getElementsByClassName('x')[0];
        var yBox = document.getElementsByClassName('y')[0];

        document.onmousemove = function(e){
            e = e || window.event;
            xBox.innerText =  e.clientX
            yBox.innerText =  e.clientY

        }
    </script>
</body>
</html>